<template>
  <div class="ele-body">
    <a-card :bordered="false" title="首饰采购信息">
      <table cellpadding="0" cellspacing="0" class="recepit_table2">
        <tbody>
          <tr>
            <td class="tit">单号</td>
            <td>{{ receipts_detail.code || '' }}</td>
            <td class="tit">制单人</td>
            <td>{{ receipts_detail.make_user_name || '' }}</td>
            <td class="tit">制单时间</td>
            <td>{{ receipts_detail.create_time || '' }}</td>
            <td class="tit">入库位置</td>
            <td>{{ receipts_detail.come_type_code_name || '' }}</td>
          </tr>
          <tr>
            <td class="tit">分配门店</td>
            <td>{{ receipts_detail.to_type_code_name || '' }}</td>
            <td class="tit">收货方式</td>
            <td>{{ receipts_detail.receive_type_name || '' }}</td>
            <td class="tit">货品类别</td>
            <td>{{ receipts_detail.goods_category_code_name || '' }}</td>
            <td class="tit">结算方式</td>
            <td>{{ receipts_detail.settle_type_name || '' }}</td>
          </tr>
          <tr>
            <td class="tit">业务日期</td>
            <td>{{ receipts_detail.business_time || '' }}</td>
            <td class="tit">总数量</td>
            <td>1</td>
            <td class="tit">总金重（g)</td>
            <td>{{ receipts_detail.total_gold_weight || '' }}</td>
            <td class="tit">总件重（g)</td>
            <td>{{ receipts_detail.total_piece_weight || '' }}</td>
          </tr>
          <tr>
            <td class="tit">总标价</td>
            <td>{{ receipts_detail.total_sticker_price || '' }}</td>
            <td class="tit">总成本</td>
            <td>{{ receipts_detail.total_cost || '' }}</td>
            <td class="tit">状态</td>
            <td>{{ receipts_detail.status_name || '' }}</td>
          </tr>
        </tbody>
      </table>
      <div class="margin-y-30">
        <a-space>
          <a-button type="primary" class="ele-btn-icon" @click="toAdd()"
            ><span>添加货品</span></a-button
          >
          <a-button class="btn" @click="daoru()"
            ><span>模板导入</span></a-button
          >
        </a-space>

        <a-form
          class="margin-y-15"
          :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
          :wrapper-col="{
            md: { span: 17 },
            sm: { span: 20 },
            xs: { span: 24 }
          }"
        >
          <a-row :gutter="24">
            <a-col :md="10" :sm="24" :xs="24">
              <vxe-table ref="goodsTable" align="center" :data="tableData0">
                <vxe-column type="seq" title="序号" width="50" />
                <vxe-column field="bar_code" title="条形码" />
                <vxe-column field="name" title="货品名称" />
                <vxe-column field="num" title="数量" />
                <vxe-column title="操作" width="120">
                  <template #default="{ row, seq }">
                    <a-space>
                      <a @click="getLook(seq)">查看</a>
                      <a @click="delGoods(row)">删除</a>
                      <a @click="edit(row)">编辑</a>
                    </a-space>
                  </template>
                </vxe-column>
              </vxe-table>
              <div class="margin-top-15">
                <vxe-pager
                  size="mini"
                  :current-page="tablePage.currentPage"
                  :page-size="tablePage.pageSize"
                  :total="tablePage.total"
                  :layouts="[
                    'PrevJump',
                    'PrevPage',
                    'JumpNumber',
                    'NextPage',
                    'NextJump',
                    'FullJump',
                    'Total'
                  ]"
                  @page-change="handlePageChange"
                />
              </div>
            </a-col>
            <a-col :md="14" :sm="24" :xs="24">
              <div style="width: 100%; height: 570px; overflow-y: auto">
                <div style="background-color: #f5f5f5; padding: 5px 10px"
                  >货品详情</div
                >
                <a-form
                  class="margin-y-15"
                  :label-col="{
                    md: { span: 7 },
                    sm: { span: 4 },
                    xs: { span: 24 }
                  }"
                  :wrapper-col="{
                    md: { span: 17 },
                    sm: { span: 20 },
                    xs: { span: 24 }
                  }"
                >
                  <a-row :gutter="24">
                    <a-col :md="20" :sm="20" :xs="20">
                      <a-form
                        class="margin-y-15"
                        :label-col="{
                          md: { span: 7 },
                          sm: { span: 4 },
                          xs: { span: 24 }
                        }"
                        :wrapper-col="{
                          md: { span: 17 },
                          sm: { span: 20 },
                          xs: { span: 24 }
                        }"
                      >
                        <a-row :gutter="24">
                          <a-col
                            :md="12"
                            :sm="12"
                            :xs="12"
                            v-for="(item, index) in goods.sku_info"
                            :key="index"
                            v-show="item.column != 'thumb'"
                          >
                            <div class="flex align-center padding-y-10">
                              <div class="margin-right-10"
                                >{{ item.name }}：</div
                              >
                              <div
                                class="flex1"
                                :class="{ mohu: item.do_secret == 1 }"
                              >
                                <template
                                  v-if="
                                    item.column_type == 'selectajaxlike' ||
                                    item.column_type == 'select' ||
                                    item.column_type == 'selectajax'
                                  "
                                  >{{ item.value_name }}</template
                                >
                                <template v-else>{{ item.value }}</template>
                              </div>
                            </div>
                          </a-col>
                        </a-row>
                      </a-form>
                    </a-col>
                    <a-col :md="4" :sm="4" :xs="4" v-if="thumb_url">
                      <div>
                        <img
                          :src="thumb_url"
                          style="width: 100px; height: 100px"
                        />
                      </div>
                    </a-col>
                  </a-row>
                </a-form>
                <template v-if="table1.tableData.length > 0">
                  <div class="fs-16 fw-bolder margin-y-15">主石信息</div>
                  <div>
                    <vxe-table
                      ref="table1111"
                      border
                      show-overflow
                      :column-config="{ resizable: true }"
                      :loading="table1.loading"
                      :data="table1.tableData"
                    >
                      <vxe-column
                        type="seq"
                        title="NO"
                        width="60"
                        fixed="left"
                      />
                      <vxe-column
                        :field="item.column"
                        :title="item.name"
                        width="150"
                        v-for="(item, index) in table1.column"
                        :key="index"
                      />
                    </vxe-table>
                  </div>
                </template>
                <template v-if="table2.tableData.length > 0">
                  <div class="fs-16 fw-bolder margin-y-15">副石信息</div>
                  <div>
                    <vxe-table
                      ref="table2222"
                      border
                      show-overflow
                      :column-config="{ resizable: true }"
                      :loading="table2.loading"
                      :data="table2.tableData"
                    >
                      <vxe-column
                        type="seq"
                        title="NO"
                        width="60"
                        fixed="left"
                      />
                      <vxe-column
                        :field="item.column"
                        :title="item.name"
                        width="150"
                        v-for="(item, index) in table2.column"
                        :key="index"
                      />
                    </vxe-table>
                  </div>
                </template>
              </div>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>

    <!-- 模板导入弹窗 -->
    <exportTemplate
      v-if="visible"
      v-model:visible="visible"
      :code="query.code"
      @done="done"
      @download="daochu"
    />
  </div>
</template>

<script setup>
  import { ref, reactive, unref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { message, Modal } from 'ant-design-vue';
  import {
    DownOutlined,
    UpOutlined,
    PlusOutlined,
    LoadingOutlined
  } from '@ant-design/icons-vue';
  import { uploadFileUrl } from '@/config/setting';
  import { daochuFn } from '@/utils/daochu.js';
  import exportTemplate from '@/components/jewelry/exportTemplate.vue';
  import {
    receipts_purchase_detail,
    download_import_template_purchase,
    del_goods,
    import_goods_purchase
  } from '@/api/jewelry/receipts_purchase';

  const { currentRoute, push } = useRouter();
  const { query } = unref(currentRoute);
  console.log(query);
  const loading = ref(false);
  const receipts_detail = ref({});
  const goods = ref({});
  const visible = ref(false);
  //货品list
  const tableData0 = ref([]);
  const thumb_url = ref(null);
  const allGoods = ref([]);

  const done = (data) => {
    console.log('data', data);
    import_goods_purchase(data)
      .then((res) => {
        updateVisible();
        getDetail();
        message.success(res.msg);
      })
      .catch((e) => {
        message.error(e);
      });
  };

  const getLook = (seq) => {
    /* console.log('row111', seq); */
    goods.value = allGoods.value[seq - 1];
    table1.column = allGoods.value[seq - 1].master_gem.column;
    table1.tableData = allGoods.value[seq - 1].master_gem.row_list;
    table2.column = allGoods.value[seq - 1].vice_gem.column;
    table2.tableData = allGoods.value[seq - 1].vice_gem.row_list;
  };
  const delGoods = (row) => {
    console.log('row222', row);
    Modal.confirm({
      title: '提示',
      content: '确认删除？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        del_goods({ code: query.code, goods_code: row.bar_code })
          .then((res) => {
            message.success(res.msg);
            getDetail();
          })
          .catch((e) => {
            message.error(e);
          });
      }
    });
  };
  const edit = (row) => {
    console.log('row', row);
    push(
      `/jewelry/receipts_purchase/edit?code=${query.code}&goods_code=${row.code}&goods_category_code=${receipts_detail.value.goods_category_code}`
    );
  };

  //主石信息
  const table1 = reactive({
    loading: false,
    column: [],
    tableData: []
  });
  //副石信息
  const table2 = reactive({
    loading: false,
    column: [],
    tableData: []
  });

  const tablePage = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10
  });
  const handlePageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage;
    tablePage.pageSize = pageSize;
    getDetail(currentPage, pageSize);
  };

  onMounted(() => {
    getDetail(tablePage.currentPage);
  });
  const getDetail = (page, pageSize) => {
    receipts_purchase_detail({
      code: query.code,
      page: page,
      pageSize: pageSize
    }).then((res) => {
      tableData0.value = [];
      tablePage.total = res.goods.total;
      receipts_detail.value = res.receipts_detail;

      if (res.goods.data.length > 0) {
        goods.value = res.goods.data[0];
        allGoods.value = res.goods.data;
        thumb_url.value =
          res.goods.data[0].thumb_url == 0 ? '' : res.goods.data[0].thumb_url;
        table1.column = res.goods.data[0].master_gem.column;
        table1.tableData = res.goods.data[0].master_gem.row_list;
        table2.column = res.goods.data[0].vice_gem.column;
        table2.tableData = res.goods.data[0].vice_gem.row_list;
        res.goods.data.forEach((item, index) => {
          let obj = {};
          obj.code = item.code;
          item.sku_info.forEach((m, mindex) => {
            if (
              m.column == 'bar_code' ||
              m.column == 'name' ||
              m.column == 'num'
            ) {
              obj[m.column] = m.value;
            }
          });
          tableData0.value.push(obj);
        });
      }
      console.log('goods.value', goods.value);
    });
  };
  const toAdd = () => {
    push(
      '/jewelry/receipts_purchase/add?code=' +
        query.code +
        '&goods_category_code=' +
        receipts_detail.value.goods_category_code
    );
  };

  const daoru = () => {
    visible.value = true;
  };

  const daochu = () => {
    let data = {
      url: 'jewelry/receipts_purchase/import_template_purchase',
      params: { code: query.code },
      filename: '货品导入模板'
    };
    daochuFn(data);
  };

  /* 更新visible */
  const updateVisible = (value) => {
    console.log('value', value);
    visible.value = value;
  };
</script>

<style lang="less" scoped>
  :deep(.ant-upload.ant-upload-select.ant-upload-select-text) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 440px !important;
    height: 180px !important;
    background-color: #fafafa;
    border: 1px dashed #d9d9d9;
    .ant-upload {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
</style>
